var parentVue = new Vue({
  el: "#effectStatistics",
  data: {
    loading: false,
    ctx: ctx,
    curHeight: (document.documentElement.clientHeight || document.body.clientHeight),//当前屏幕高度
    banjianLoading: false,
    dicContents: {}, // 数据字典数据
    applyStates: [
      {
        label: '0',
        name: '已接件',
      },
      {
        label: '1',
        name: '受理中',
      },
      {
        label: '2',
        name: '已受理',
      },
      {
        label: '3',
        name: '待补全',
      },
      {
        label: '4',
        name: '已补全',
      },
      {
        label: '5',
        name: '不予受理',
      },
      {
        label: '6',
        name: '已办结',
      },
      {
        label: '14',
        name: '撤件办结',
      },
      {
        label: '15',
        name: '待复验',
      },
      {
        label: '16',
        name: '已退件',
      },
      {
        label: '17',
        name: '待整改',
      },
      {
        label: '18',
        name: '申报退件',
      },
    ], // 办理状态
    dateRange: [],
    // tableData: [],
    totalLoading: false, // 头部模块的加载效果
    analysisLoading: false,// 各类型申报统计加载效果
    startTime: '', // 开始时间yyyy-MM-dd HH:mm:ss
    endTime: '', // 结束时间

    dateActive: 'all', // 时间切换类型
    approveInfoLoading: false,
    xAxisBar: [],
    dicRegions: [], // 区域下拉框数据
    dicRegionFirst: {}, // 第一个城市
    searchForm: {
      daterange: [],
      regions: ['all'],
      keyword: '',
      curRegion: '全部',
      regionNames: [],
      pageNum: 1,
      pageSize: 5
    },
    listCivicismApplyData: [],
    total: 0,
    search: {
      applyStates: [],
      keyword: '',
      pagination: {
        page: 1,
        pages: 1,
        perpage: 5
      },
    },
    //20210820 --------------------
    iteminsts: [],
    itemNum: 0,
    banjieRate: '0',
    projNum: 0,
    avgSpanTime: '0',
    orgSpanTimes: [],
    overDateRate: '0',
    applyNum: 0,
    avgApproveTime: '0',
    startPickerOptions: {
      disabledDate(time) {
        return time.getTime() > Date.now();
      },
    },
    endPickerOptions: {
      disabledDate(time) {
        return time.getTime() > Date.now();
      },
    }
  },
  created: function () {
    this.getListBscDicRegion();
    this.getDicContents();
  },
  mounted: function () {
    this.changeDate('all');
  },
  methods: {
    getListBscDicRegion: function () {
      var ts = this
      request('', {
        type: 'get',
        url: ctx + 'rest/conditional/query/listBscDicRegion'
      }, function (res) {
        if (res.success) {
          if (res.content && res.content.length) {
            ts.dicRegionFirst = res.content[0]
            ts.dicRegions = res.content[0].children.map(function (item) {
              ts.$set(item, 'isCheck', false)
              return item
            })
            ts.dicRegions.unshift({
              regionId: 'all',
              regionName: '全部',
              isCheck: true
            })
            ts.dicRegions.push({
              regionId: ts.dicRegionFirst.regionId,
              regionName: '市区',
              isCheck: false
            })
          }
        }
      }, function (err) {

      })
    },
    // 刷新数据
    freshFn: function () {
      this.getbanjianStatistic()
      // 市政报装列表
      this.getlistCivicismApply();
    },
    // 申报数据
    getbanjianStatistic: function () {
      var ts = this,
        params = {};
      if (ts.period) {
        params = {
          period: ts.period
        }
      } else {
        params = {
          startDate: ts.startTime,
          endDate: ts.endTime,
        }
      }
      if (ts.searchForm.regions && ts.searchForm.regions.length > 0 && !(ts.searchForm.regions.indexOf('all') > -1)) {
        // params.regionIds =  JSON.stringify(ts.searchForm.regions);
        params.regionIds = ts.searchForm.regions.join(',');
      }
      ts.banjianLoading = true;
      request('', {
        type: 'get',
        url: ctx + 'civicism/statistics/outlineApproveStatics',
        data: params,
      }, function (res) {
        if (res.success && res.content) {
          for (var respDataKey in res.content) {
            ts[respDataKey] = res.content[respDataKey];
          }
          ts.initOrgBJBar()
          ts.initOrgApprveTimeBar()
        }
        ts.banjianLoading = false
      }, function (err) {
        ts.banjianLoading = false
      })
    },
    // 各公司平均审批用时柱状图
    initOrgBJBar: function () {
      //orgSpanTimes
      var ts = this
      var chartDom = document.getElementById('org_banjian');
      var barChart = echarts.init(chartDom);
      var colors = ['rgba(91,143,249,1)', 'rgba(115,231,190,1)', 'rgba(250,173,20,1)'],
        units = ['个', '个', ' %'], data1 = [], data2 = [], data3 = [];
      // var resData=[];
      ts.xAxisBar = [];
      if (ts.orgSpanTimes) {
        ts.orgSpanTimes.forEach(function (item) {
          ts.xAxisBar.push(item.orgName)
        })
      }
      ts.orgSpanTimes.forEach(function (item) {
        data1.push(item.applyNum)
        data2.push(item.completeNum)
        data3.push(item.completeRate)
      })
      var option = {
        color: colors,
        /*  title: {
            text: '部门办件数'
          },*/
        tooltip: {
          trigger: 'axis',
          axisPointer: { // 坐标轴指示器，坐标轴触发有效
            type: 'shadow', // 默认为直线，可选为：'line' | 'shadow'
            shadowStyle: {
              color: '#f7f7f7',
            },
            z: -1,
          },
          borderWidth: 0,
          formatter: function (params) {
            var str = ''
            params.forEach(function (item, index) {
              str = str + '<p style="font-weight: normal;line-height: 32px;">' + item.seriesName + ':<span style="color: ' + colors[index] + '; padding:0 0 0 10px;">' + item.data + units[index] + '</span></p>'
            })

            return str
          },
          backgroundColor: 'rgba(13,28,40,.9)',
          textStyle: {
            color: '#fff',
            lineHeight: 32,
          },
        },
        /*   legend: {
             data: ['申报数', '办结数', '办结率'],
             left: '40%',
             icon: 'rect',
             itemHeight: 8,
             itemWidth: 8,
             itemGap: 16,
             left: '180px',
             top: '3px'
           },*/
        grid: {
          top: '20px',
          left: '80px',
          right: '80px',
          bottom: '50px',
        },
        xAxis: {
          type: 'category',
          /* boundaryGap: false,*/
          axisTick: {
            show: false,
          },
          axisLine: {
            show: false,
          },
          data: ts.xAxisBar
        },
        yAxis: [{
          type: 'value',
          axisLabel: {
            formatter: '{value}'
          },
          axisTick: {
            show: false,
          },
          axisLine: {
            show: false,
          },
          splitLine: {//分割线
            show: true,
            lineStyle: {
              type: 'dashed',
              color: "rgba(223,224,226,1)",
            }
          }
        }, {
          type: 'value',
          splitLine: {
            show: false,
          },
          interval: 50,
          min: 0,
          max: 100,
          axisLabel: {
            formatter: '{value} %'
          },
          axisTick: {
            show: false,
          },
          axisLine: {
            show: false,
          },
          splitLine: {//分割线
            show: true,
            lineStyle: {
              type: 'dashed',
              color: "rgba(223,224,226,1)",
            }
          }
        }],
        series: [{
          name: '申报数',
          barMaxWidth: 10,
          data: data1,
          type: 'bar',
          itemStyle: {
            normal: {
              // 统一设置四个角的圆角大小
              barBorderRadius: 7,
              //设置柱状图颜色渐变
              color: "#5B8FF9"
            }
          },
        }, {
          name: '办结数',
          barMaxWidth: 10,
          data: data2,
          type: 'bar',
          itemStyle: {
            normal: {
              // 统一设置四个角的圆角大小
              barBorderRadius: 7,
              //设置柱状图颜色渐变
              color: "#5AD8A6"
            }
          },
        }, {
          name: '办结率',
          barMaxWidth: 10,
          data: data3,
          type: 'line',
          itemStyle: {
            normal: {
              // 统一设置四个角的圆角大小
              barBorderRadius: 7,
              //设置柱状图颜色渐变
              color: "#FF7368"
            }
          },
        }]
      };

      option && barChart.setOption(option);
    },
// 各公司平均审批用时柱状图
    initOrgApprveTimeBar: function () {
      var ts = this
      var chartDom = document.getElementById('approveTime');
      var barChart = echarts.init(chartDom);
      var colors = ['rgba(91,143,249,1)', 'rgba(115,231,190,1)', 'rgba(250,173,20,1)'],
        units = [' 天', '工作日', ' 工作日', '%'], data1 = [], data2 = [], data3 = [], data4 = [];
      var resData = [];
      ts.xAxisBar = [];
      if (ts.orgSpanTimes) {
        ts.orgSpanTimes.forEach(function (item) {
          ts.xAxisBar.push(item.orgName)
        })
      }
      ts.orgSpanTimes.forEach(function (item) {
        data1.push(item.avgSpanTime)
        data2.push(item.avgApproveTime)
        data3.push(item.avgDueTime)
        data4.push(item.overDateRate)
      })
      var option = {
        color: colors,
        /*  title: {
            text: '部门平均审批用时'
          },*/
        tooltip: {
          trigger: 'axis',
          axisPointer: { // 坐标轴指示器，坐标轴触发有效
            type: 'shadow', // 默认为直线，可选为：'line' | 'shadow'
            shadowStyle: {
              color: '#f7f7f7',
            },
            z: -1,
          },
          borderWidth: 0,
          formatter: function (params) {
            var str = ''
            params.forEach(function (item, index) {
              str = str + '<p style="font-weight: normal;line-height: 32px;">' + item.seriesName + ':<span style="color: ' + colors[index] + '; padding:0 0 0 10px;">' + item.data + units[index] + '</span></p>'
            })

            return str
          },
          backgroundColor: 'rgba(13,28,40,.9)',
          textStyle: {
            color: '#fff',
            lineHeight: 32,
          },
        },
        /* legend: {
           data: ['平均跨度用时', '平均审批用时', '承诺审批用时', '逾期率'],
           left: '40%',
           icon: 'rect',
           itemHeight: 8,
           itemWidth: 8,
           itemGap: 16,
           left: '180px',
           top: '3px'
         },*/
        /*  grid: {
            top: '130px',
            left: '45px',
            right: '45px',
            bottom: '32px',
          },*/
        xAxis: {
          type: 'category',
          axisTick: {
            show: false,
          },
          axisLine: {
            show: false,
          },
          axisLabel: {
            interval:0,
            rotate:10
          },
          data: ts.xAxisBar
        },
        yAxis: [{
          type: 'value',
          interval: 50,
          axisLabel: {
            formatter: '{value}'
          },
          axisTick: {
            show: false,
          },
          axisLine: {
            show: false,
          },
          splitLine: {//分割线
            show: true,
            lineStyle: {
              type: 'dashed',
              color: "rgba(223,224,226,1)",
            }
          }
        }, {
          type: 'value',
          splitLine: {
            show: false,
          },
          interval: 50,
          min: 0,
          max: 100,
          axisLabel: {
            formatter: '{value} %'
          },
          axisTick: {
            show: false,
          },
          axisLine: {
            show: false,
          }
        }],
        series: [
          {
            name: '平均跨度用时',
            barMaxWidth: 10,
            data: data1,
            type: 'bar',
            itemStyle: {
              normal: {
                // 统一设置四个角的圆角大小
                barBorderRadius: 7,
                //设置柱状图颜色渐变
                color: "#179BFF"
              }
            },
          },
          {
            name: '平均审批用时',
            barMaxWidth: 10,
            data: data2,
            type: 'bar',
            itemStyle: {
              normal: {
                // 统一设置四个角的圆角大小
                barBorderRadius: 7,
                //设置柱状图颜色渐变
                color: "#5AD8A6"
              }
            },
          },
          {
            name: '承诺审批用时',
            barMaxWidth: 10,
            data: data3,
            type: 'line',
            itemStyle: {
              normal: {
                // 统一设置四个角的圆角大小
                barBorderRadius: 7,
                //设置柱状图颜色渐变
                color: "#FF7368"
              }
            },
            lineStyle: {
              width: 2,
              type: 'dotted'  //'dotted'点型虚线 'solid'实线 'dashed'线性虚线
            },
          }, {
            name: '逾期率',
            barMaxWidth: 10,
            data: data4,
            type: 'line',
            yAxisIndex: 1,
            itemStyle: {
              normal: {
                // 统一设置四个角的圆角大小
                barBorderRadius: 7,
                //设置柱状图颜色渐变
                color: "#FFBA17"
              }
            },
          }]
      };
      // 自适应图表
      window.addEventListener('resize',function(){
        barChart.resize();
      })
      option && barChart.setOption(option);
    },
    // 获取市政报装table表格数据
    getlistCivicismApply: function () {
      var ts = this,
        params = JSON.parse(JSON.stringify(ts.search));
      /*if (params.categoryTypes && params.categoryTypes.length > 0) {
        params.categoryTypes = params.categoryTypes.join(",");
      } else {
        delete params.categoryTypes
      }*/
      if (ts.search.applyStates && params.applyStates.length > 0) {
        params.applyStates = params.applyStates.join(",");
      } else {
        delete params.applyStates
      }
      if (ts.period) {
        params.period = ts.period;
      } else {
        params.startDate = ts.startTime;
        params.endDate = ts.endTime;
      }
      if (ts.searchForm.regions && ts.searchForm.regions.length > 0 && !(ts.searchForm.regions.indexOf('all') > -1)) {
        params.regionIds = ts.searchForm.regions.join(",");
      }
      ts.banjianLoading = true;
      request('', {
        type: 'get',
        url: ctx + 'civicism/statistics/listOutlineApproveStatics',
        data: params,
      }, function (res) {
        if (res.success && res.content) {
          ts.listCivicismApplyData = res.content.list || [];
          ts.total = res.content.total;
        }
        ts.banjianLoading = false
      }, function (err) {
        ts.banjianLoading = false
      })
    },
    // 查看
    toDetail: function (row) {
      var ts = this;
      var taskId = row.taskId;
      var viewId = row.viewId || '39e32f68-0e67-4c5a-abc3-6cd9f8a1b908';
      var url = ctx + "apanmis/page/stageApproveIndex?isNotCompareAssignee=true&observer=true&taskId=" + taskId + "&viewId=" + viewId;
      if (taskId) {
        var tempwindow = window.open(); // 先打开页面
        setTimeout(function () {
          tempwindow.location = url
        }, 0)
      } else {
        ts.$message('taskId不能为空');
      }
    },
    // 催办
    sendRemind: function (row) {
      var ts = this;
      if (!row.loading) {
        ts.$set(row, 'loading', true);
      }
      var taskId = row.taskId;
      var procinstId = row.procinstId
      var applyinstId = row.applyinstId;
      var viewId = row.viewId || "cc06641e-f6e6-4dd7-bcc7-591e23080c6a"
      var url = ctx + "apanmis/page/municipalSupervisionDetail.html?isNotCompareAssignee=true&taskId=" + taskId + "&applyinstId=" + applyinstId + "&isUrge=true&procInstId=" + procinstId + "&viewId=" + viewId;
      if (taskId && applyinstId) {
        ts.$set(row, 'loading', false);
        var tempwindow = window.open(); // 先打开页面
        setTimeout(function () {
          tempwindow.location = url
        }, 0)
      } else {
        ts.$set(row, 'loading', false);
        ts.$message('taskId、applyinstId,不能为空');
      }
      /* var urgeInfo  = [];
       urgeInfo.push(row)
       request('', {
           type: 'post',
           url: ctx + 'bpm/front/remind/civicism/urgeMsg/save',
           data:{
               urgeInfo:JSON.stringify(urgeInfo)
           }
       }, function (res) {
           ts.$set(row,'loading',false);
           if (res.success) {
               ts.$message.success(res.message||'发送催办消息成功')
           } else {
               ts.$message.error( res.message||'发送催办消息失败')
           }
       }, function (err) {
           ts.$set(row,'loading',false);
           ts.$message.error('发送催办消息失败')
       })*/
    },
    handleSizeChange: function (size) {
      var _that = this;
      _that.search.pagination.perpage = size;
      _that.getlistCivicismApply();
    },
    handleCurrentChange: function (value) {
      var _that = this;
      _that.search.pagination.page = value;
      _that.search.pagination.pages = value;
      _that.getlistCivicismApply();
    },
    // 获取数据字典
    getDicContents: function () {
      var ts = this;
      request('', {
          url: ctx + 'rest/common/getDicContents',
          type: 'get',
        }, function (res) {
          if (res.success) {
            ts.dicContents = res.content;
            ts.applyStates = ts.dicContents['ITEMINST_STATE'];
          }
        },
        function (err) {

        })
    },
    // 办理状态文本
    formatMyStatus: function (val) {
      var ts = this;
      var str = '';
      ts.dicContents['ITEMINST_STATE'].forEach(function (item) {
        if (item.itemCode == val) {
          str = item.itemName
        }
      })
      return str
    },
    // 办理状态颜色值
    applyinstStateColor: function (val) {
      if (val == 0) return "#169aff";
      if (val == 1) return "#169aff";
      if (val == 2) return "#26bd7f";
      if (val == 3) return "#ff8915";
      if (val == 4) return "#ff8915";
      if (val == 5) return "#FF4B47";
      if (val == 6) return "#26bd7f";
      if (val == 7) return "#ff8915";
      if (val == 8) return "#ff8915";
      if (val == 9) return "#ff8915";
      if (val == 10) return "#ff8915";
      if (val == 11) return "#ff8915";
      if (val == 12) return "#727475";
      if (val == 13) return "#727475";
      if (val == 14) return "#727475";
      if (val == 15) return "#ff8915";
      if (val == 16) return "#727475";
      return "#000";
    },
    // 切换时间
    changeDate: function (type, key) {
      this.dateActive = type
      if (type === 'dateRange') {
        this.period = '';
        if (this.startTime && this.endTime) {
          if (this.startTime > this.endTime) {
            this.$message({
              type: 'error',
              message: '开始时间不能大于结束时间！'
            })
            return
          }
          this.freshFn()
        } else {
          // 清除时间时
          if (key === 'endTime' && !this.endTime) {
            this.dateActive = 'all'
            this.startTime = ''
            this.freshFn()
          }
        }
        return;
      }
      var nowDate = new Date()
      var month = nowDate.getMonth();
      this.endTime = formatDate(nowDate, 'yyyy-MM-dd')
      if (type === 'month') {
        nowDate.setDate(1)
      } else if (type === 'quarter') {
        if (month < 3) {
          nowDate.setMonth(0);
        } else if (2 < month && month < 6) {
          nowDate.setMonth(3);
        } else if (5 < month && month < 9) {
          nowDate.setMonth(6);
        } else if (8 < month && month < 11) {
          nowDate.setMonth(9);
        }
        nowDate.setDate(1)
      } else if (type === 'year') {
        nowDate.setDate(1);
        nowDate.setMonth(0);
      }
      this.startTime = formatDate(nowDate, 'yyyy-MM-dd')
      if (type === 'all') {
        this.startTime = ''
        this.endTime = ''
      } else {
        this.startTime = this.startTime
      }
      this.freshFn()
    },
    // 区域切换
    handleCommand: function (command) {
      console.log(command)
      if (command.regionName !== '全部' && this.dicRegions[0].isCheck) {
        this.$set(this.dicRegions[0], 'isCheck', false)
      }
      command.isCheck = !command.isCheck
      if (this.isMultiple && command.isCheck) {
        this.searchForm.push(command.regionName)
        this.searchForm.regions.push(command.regionId)
        this.searchForm.curRegion = this.searchForm.regionNames.join(',')
      } else {
        this.searchForm.regions = [command.regionId]
        this.searchForm.curRegion = command.regionName
      }
      this.freshFn()
    },
    // 重置搜索
    resetSearch: function () {
      this.search = {
        // categoryTypes: [],
        applyStates: [],
        keyword: '',
        pagination: {
          page: 1,
          pages: 1,
          perpage: 5
        },
      };
      this.getlistCivicismApply();
    },
    resetPagination: function () {
      this.search.pagination = {
        page: 1,
        pages: 1,
        perpage: 5
      };
      this.getlistCivicismApply();
    },

  },
})